<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            background-color: #7febbf;
            overflow: hidden;
        }
        canvas {
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
        }
        .container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .lines {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            /* border-right: grey solid 5px; */

            width: 960px;
            height: 400px;
            border: grey solid 1px;
        }
        .lantern {
            position: absolute;
            top: 67px;
            left: 30px;
            width: 40px;
            height: 60px;
            background-color: rgba(255, 255, 255, 0.3);
            border-top: #facc43 solid 20px;
            border-bottom: #facc43 solid 5px;
            border-left: #facc43 solid 2px;
            border-right: #facc43 solid 2px;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            -webkit-animation: sway 1s infinite ease-in-out alternate;
            animation: sway 1s infinite ease-in-out alternate;
            -webkit-transform-origin: top;
            transform-origin: top;
            -webkit-transform: scale(0.5);
        }
        .lantern:nth-child(2) {
            top: 65px;
            left: 340px;
        }
        .lantern:nth-child(3) {
            top: 70px;
            left: 820px;
        }
        .lantern:nth-child(4) {
            top: 170px;
            left: 85px;
        }
        .lantern:nth-child(5) {
            top: 170px;
            left: 460px;
        }
        .lantern:nth-child(6) {
            top: 170px;
            left: 910px;
        }
        .lantern:nth-child(7) {
            top: 258px;
            left: 650px;
        }
        .lantern:nth-child(8) {
            top: 271px;
            left: 200px;
        }
        .lantern#row-two {
            width: 25px;
            height: 33px;
            border-top: #facc43 solid 12px;
            border-bottom: #facc43 solid 3px;
            opacity: 0.5;
            -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
        }
        .lantern#row-three {
            width: 30px;
            height: 45px;
            border-top: #facc43 solid 15px;
            border-bottom: #facc43 solid 5px;
            opacity: 0.85;
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }
        .hook {
            position: absolute;
            top: -25px;
            left: 15px;
            width: 10px;
            height: 0px;
            background-color: yellow;
            border-top: #facc43 solid 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .lantern#row-two .hook {
            top: -16px;
            left: 7px;
        }
        .lantern#row-three .hook {
            top: -20px;
            left: 10px;
        }
        .hook:before {
            content: "";
            position: absolute;
            top: -15px;
            left: 5px;
            width: 1px;
            height: 5px;
            background-color: #facc43;
        }
        .light {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 0px;
            height: 0px;
            border-radius: 50%;
            -webkit-box-shadow: 0 0 25px 15px yellow;
            box-shadow: 0 0 25px 15px yellow;
            background-color: yellow;
        }
        .light#blue {
            box-shadow: 0 0 25px 15px cyan;
            background-color: cyan;
        }
        .light#pink {
            box-shadow: 0 0 25px 15px hotpink;
            background-color: hotpink;
        }
        .light#white {
            box-shadow: 0 0 25px 15px white;
            background-color: white;
        }
        .sparkle {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 70px;
            width: 1px;
            height: 1px;
            border-radius: 50%;
            box-shadow: 0 0 3px 0.2px white;
            background-color: white;
            -webkit-animation: sparkle 1.5s infinite ease-in-out;
            animation: sparkle 1.5s infinite ease-in-out;
        }
        @-webkit-keyframes sway {
            0% {
                -webkit-transform: rotate(20deg);
            }
            100% {
                -webkit-transform: rotate(-20deg);
            }
        }
        @keyframes sway {
            0% {
                transform: rotate(20deg);
            }
            100% {
                transform: rotate(-20deg);
            }
        }
    </style>
</head>
<body>
<canvas id="sky"></canvas>
<div class="container">

    <div class="lines">
        <div class="lantern">
            <div class="hook"></div>
            <div class="light"></div>
        </div>
        <div class="lantern">
            <div class="hook"></div>
            <div class="light" id="blue"></div>
        </div>
        <div class="lantern">
            <div class="hook"></div>
            <div class="light" id="white"></div>
        </div>
        <div class="lantern" id="row-two">
            <div class="hook"></div>
            <div class="light" id="pink"></div>
        </div>
        <div class="lantern" id="row-two">
            <div class="hook"></div>
            <div class="light" id="yellow"></div>
        </div>
        <div class="lantern" id="row-two">
            <div class="hook"></div>
            <div class="light" id="blue"></div>
        </div>
        <div class="lantern" id="row-three">
            <div class="hook"></div>
            <div class="light" id="pink"></div>
        </div>
        <div class="lantern" id="row-three">
            <div class="hook"></div>
            <div class="light" id="white"></div>
        </div>

        <svg viewBox="0 0 100 50" version="1.1">
            <path d="M 0 6 q 8 2 14 -6" stroke="grey" stroke-width="0.3" fill="none" />
            <path d="M 14 0 q 23 12 46 0" stroke="grey" stroke-width="0.3" fill="none" />
            <path d="M 60 0 q 23 10 40 5" stroke="grey" stroke-width="0.3" fill="none" />

            <path d="M 0 15 q 10 5 25 -3" stroke="grey" stroke-width="0.1" fill="none" />
            <path d="M 25 12 q 25 10 50 0" stroke="grey" stroke-width="0.1" fill="none" />
            <path d="M 75 12 q 10 5 25 5" stroke="grey" stroke-width="0.1" fill="none" />

            <path d="M 0 25 q 30 5 50 0" stroke="grey" stroke-width="0.2" fill="none" />
            <path d="M 50 25 q 30 5 50 -10" stroke="grey" stroke-width="0.2" fill="none" />
        </svg>

    </div>

</div>
</body>
</html>
<script>
    window.onload = function() {

    var canvas = document.getElementById("sky");
    var context = canvas.getContext("2d");
    canvas.width = 960;
    canvas.height = 400;
    document.body.appendChild(canvas);

    var particles = {},
    particleIndex = 0,
    settings = {
    density: 5,
    particleSize: 0.5,
    maxLife: 100,
    };

    function Particle() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;
    this.life = 0;
    this.opacity = 0;
    }

    Particle.prototype.draw = function() {

    this.opacity += 0.1;
    this.life++;
    if (this.life >= settings.maxLife) {
    delete particles[this.id];
    }

    context.clearRect(settings.leftWall, settings.groundLevel, canvas.width, canvas.height);
    context.beginPath();
    context.fillStyle = "rgba(255,255,255," + this.opacity + ")";
    context.arc(this.x, this.y, settings.particleSize, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();

    }

    setInterval(function() {
    context.fillStyle = "rgba(0,0,20,0.2)";
    context.fillRect(0, 0, canvas.width, canvas.height);

    // Draw the particles
    for (var i = 0; i < settings.density; i++) {
    if (Math.random() > 0.97) {
    new Particle();
    }
    }

    for (var i in particles) {
    particles[i].draw();
    }
    }, 100);
    };
</script>